<template>
    <div class="lefttwo">
        <!-- <p>新增确诊TOP10</p> -->
        <div id="two">

        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";
import $ from 'jquery'


export default {
    name: "App",
    props: ["width", "height"],
    setup() {
        let myEcharts = echarts;

        onMounted(() => {
            let leftone
            let fn = new Promise((resolve, reject) => {
                //2.jquery中ajax也封装好了jsonp-缺点：1.只能用get方法请求,不能用post 2.还得后台配合你写回调参数
                $.ajax({
                    url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
                    dataType: "jsonp",
                    // jsonp: "callback",//传给后端用来获取jsonp回调函数名的参数名，一般默认是callback。不写也可以
                    // jsonpCallback:"cb",//也可跟后端约定函数名
                    success(res) {
                        // console.log('ajax数据', res);
                        let datalist = JSON.parse(res.data);
                        // console.log(datalist);
                        let left1 = datalist.countryAddConfirmRankList
                        let left2 = datalist.continentStatis
                        let left3 = datalist.foreignList
                        let right1 = datalist.globalDailyHistory
                        let right2 = datalist.countryConfirmWeekCompareRankList
                        let right3 = datalist.importStatis
                        let cont1 = datalist.globalStatis
                        resolve({ left1, left2, left3, right1, right2, right3, cont1 })
                    }
                })
            })

            fn.then(res => {
                // console.log("fn", res);
                leftone = res.left2
                initChart(leftone)
            })
        });

        onUnmounted(() => {
            myEcharts.dispose;
        });

        let data = {
            yz: [],
            bmz: [],
            dyz: [],
            oz: [],
            qt: []
        }
        // 第一个
        function initChart(aa) {
            let chart = myEcharts.init(document.getElementById("two"), "purple-passion");
            let x = []
            let time = []
            aa.forEach((item) => {
                x.push(item)
            })
            x.forEach((item) => {
                time.push(item.date)
                item.statis.亚洲 != undefined ? data.yz.push(item.statis.亚洲) : data.yz.push('70863')
                item.statis.北美洲 != undefined ? data.bmz.push(item.statis.北美洲) : ''
                item.statis.大洋洲 != undefined ? data.dyz.push(item.statis.大洋洲) : data.yz.push('4086')
                item.statis.欧洲 != undefined ? data.oz.push(item.statis.欧洲) : ''
                item.statis.其他 != undefined ? data.qt.push(item.statis.其他) : data.yz.push('712')
                // console.log(data.yz);
            })
            chart.setOption({
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    textStyle: {
                        color: "#4c9bfd",
                    },
                    right: "10%",
                },
                grid: {
                    top: "30%",
                    left: "0%",
                    right: "5%",
                    bottom: "3%",
                    show: true, // 显示边框
                    borderColor: "#012f4a", // 边框颜色
                    containLabel: true,
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {},
                //   },
                // },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: time,
                    axisTick: {
                        show: false, // 去除刻度线
                    },
                    axisLabel: {
                        color: "#4c9bfd", // 文本颜色
                    },
                    axisLine: {
                        show: false, // 去除轴线
                    },
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                        show: false, // 去除刻度线
                    },
                    axisLabel: {
                        color: "#fff", // 文本颜色
                    },
                    axisLine: {
                        show: false, // 去除轴线
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#012f4a", // 分割线颜色
                        },
                    },
                },
                series: [
                    {
                        name: "亚洲",
                        type: "line",
                        smooth: true,
                        // stack: "Total",
                        data: data.yz,
                    },
                    {
                        name: "北美洲",
                        type: "line",
                        // stack: "Total",
                        smooth: true,
                        data: data.bmz,
                    },
                    {
                        name: "大洋洲",
                        type: "line",
                        smooth: true,
                        // stack: "Total",
                        data: data.dyz,
                    },
                    {
                        name: "欧洲",
                        type: "line",
                        // stack: "Total",
                        smooth: true,
                        data: data.oz,
                    },
                    {
                        name: "其他",
                        type: "line",
                        // stack: "Total",
                        smooth: true,
                        data: data.qt,
                    },
                ],
            })
            window.addEventListener(
                "resize",
                function (e) {
                    chart.resize();

                },
                false
            );
        }
        return {
            initChart
        };
    }
};

</script>
<style lang="scss" scoped>
#two {
    width: 520px;
    height: 100%;
    // padding: 20px;
    border: 1px solid skyblue;
}

p {
    color: #fff;
}
</style>